<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <p v-color="'red'">测试</p>

    <button @click="color = 'green'">改变 color 颜色值</button>
    <hr />
    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
      <!-- <template #content="scope"> -->
      <template #content="{ msg, user }">
        <div>
          <p>第一句诗</p>
          <p>第二句诗</p>
          <!-- <p>{{ scope }}</p> -->
          <p>{{ msg }}</p>
          <p>{{ user.name }}</p>
        </div>
      </template>
      <template #author>
        <div>
          <h2>作者: mmsmd</h2>
        </div>
      </template>
    </Article>
    <hr />
    <div class="box" style="display: none">
      <!-- 渲染 Left 组件和 Right 组件 -->

      <Left>
        <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default的插槽之中-->
        <!-- 1.默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中 -->
        <!-- 2.v-slot:后面要跟上插槽的名字 -->
        <!-- 3.v-slot:指令不能直接用在元素身上，必须用在 template标签上 -->
        <!-- 4.template这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的html元素  -->
        <!-- v-slot指令简写形式为 # -->

        <!-- <template #default>
          <p>这是在 Left组件的内容区域，声明的p标签</p>
        </template> -->
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
  data() {
    return {
      color: "blue",
    };
  },
  components: {
    Left,
    Article,
  },
  // 私有自定义指令节点
  directives: {
    //定义名为 color 的自定义指令，指向一个配置对象
    // color: {
    //   // 当指令 第一次 被绑定到元素上的时候，会立即触发 bind函数
    //   // 当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发
    //   // 形参中的el表示当前指令所绑定到的那个DOM 对象
    //   bind(el, binding) {
    //     el.style.color = binding.value;
    //     console.log(binding);
    //   },
    //   // 在DOM更新的时候会触发 update 函数
    //   update(el, binding) {
    //     el.style.color = binding.value;
    //     console.log(binding);
    //   },
    // },

    color(el, binding) {
      el.style.color = binding.value;
    },
  },
};
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
